以設計稿的角度出發，其實將樣板圖片轉為 HTML 是一件很直覺的事情，在大多數的情況下，當我們在設計任何畫面時，都會為了方便管理而將部分的元素進行群組，就比如說我希望可以讓導覽列能自由移動，就會將商標與按鈕等進行綁定，而當我們在撰寫 HTML 的時候，其實就可以很直接地給予他一個 Nav 的 Tag，而內容若也仔細分類處理的話，Logo、Links、Buttons 這些也將會成為我們進入 Html 時分類的依據。
專案範例
https://iffyart.github.io/FrontEnd-Course-Demo/
專案原始檔案
https://github.com/IffyArt/FrontEnd-Course-Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<nav class="navbar">
<a class="navbar__logo" href="index.html">Mockup Company</a>
<ul class="navbar__link">
<li><a href="#">Solutions</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="navbar__button">
<li><a href="#">Log in</a></li>
<li><a href="#">Get Started</a></li>
</ul>
</nav>
<header class="header">
<h1 class="header__title">About Us</h1>
<p class="header__container">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur
blanditiis deleniti quod sunt nulla eos autem magnam,
</p>
</header>
<main class="main">
<article class="main__row main__row--dark-mode">
<section class="main__container">
<aside class="main__text-aside">
<h2 class="main__title">Our Mission</h2>
<p>
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.
</p>
</aside>
<ul class="main__image-demo">
<li>
<img
src="https://picsum.photos/id/237/400/300"
alt="動態變化的圖片"
/>
</li>
<li>
<img
src="https://picsum.photos/id/230/400/300"
alt="動態變化的圖片"
/>
</li>
<li>
<img
src="https://picsum.photos/id/29/400/300"
alt="動態變化的圖片"
/>
</li>
</ul>
</section>
</article>
</main>
<footer class="footer">© 2022 Mockup. All Rights Reserved.</footer>
iThome鐵人賽
看影片追技術